<template>
	<view class="warp">
		<view class="video_box">
			<video class="video_item" :src="detailCourseImage" :autoplay="true"></video>
		</view>
		<view class="cntext_box">
			<view class="c_tab flex_row_start_center">
				<view @click="changetab(0)" :class="tabnum==0?'ct_item active':'ct_item'">简介</view>
				<view @click="changetab(1)" :class="tabnum==1?'ct_item active':'ct_item'">课程目录</view>
			</view>
			<view v-if="tabnum==0">
				<view class="intraducetext_top">
					<view class="flex_row_between_center intraducetext_top1">
						<view class="intraducetext_top1_1">{{courseDetail.courseName}}</view>
						<view class="flex_row_start_center">
							<view class="intraducetext_top1_2" @click="getCollect()" v-if="isCollected==false">收藏{{collectRecordNum}}</view>
							<view class="intraducetext_top1_2" @click="delCollect()" v-if="isCollected==true">已收藏{{collectRecordNum}}</view>
							<!-- <view class="intraducetext_top1_3">{{collectRecordNum}}</view> -->
						</view>
					</view>
					<view class="flex_row_start_center intraducetext_top2">
						<view v-if="courseDetail.courseDetailList && courseDetail.courseDetailList.length>0">{{courseDetail.courseDetailList.length}}章节</view>
						<!-- <view>2024.3.12更新</view> -->
					</view>
					<view >{{courseDetail.courseDetail}}</view>
					<!-- <view class="flex_row_end_center">
						<uni-icons type="redo" color="#9B9B9B" size="16"></uni-icons>
						<view style="margin-left: 12rpx;">分享</view>
					</view> -->
					<view class="flex_row_end_center">
						<button class="share_model_pre " open-type="share">
							<uni-icons type="redo" color="#9B9B9B" size="16"></uni-icons>
						</button>
					</view>
					
				</view>
				<view class="intraducetext_lecturer flex_row_start_center">
					<image class="intraducetext_lecturer_image" @click="natTo" :src="courseDetail.lecturerImage" mode="aspectFit"></image>
					<view class="intraducetext_lecturer_right">
						<view>讲师：{{courseDetail.lecturerName}}</view>
						<view>{{courseDetail.lecturerDetail}}</view>
					</view>
				</view>
			</view>
			<view class="classlist"  v-if="tabnum==1" >
				<view class="classlist_title">{{courseDetail.courseName}}</view>
				
				<scroll-view scroll-y="true" class="scroll-Y"   :scroll-into-view="scrollId"    :scroll-with-animation="true" :style="{height: scrollHeight,}" >
					
					<view class="item flex_row_between_center " :id="'item-'+index" v-for="(item,index) in courseDetail.courseDetailList" :key="index"  @click="getClick(item,index)">
						<view class="left" >
							<image class="list_left_video"  :src="item.detailCourseImage" mode="aspectFit"></image>
						</view>
						<view class="right">
							<view class="title flex_row_start_center" :class="detailVideoId==item.detailId ? 'color_title':''">
								<view style="margin-right: 10rpx;">{{index >10 ? index:'0'+(index+1)}}</view>
								<view>{{item.detailCourseTitle}}</view>
								</view>
								<view class="tetx">{{item.detailCourseDetail}}</view>
							<view class="icons flex_row_start_center">
								<uni-icons type="videocam" color="#9B9B9B" size="18"></uni-icons>
								<span style="margin-left: 10rpx;">{{item.watchNum}}</span>
							</view>
						</view>
					</view>
			   </scroll-view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoUrl:'http://csp-aliyun-oos01.oss-cn-beijing.aliyuncs.com/dongzhiceruoyi/2024/05/08/6042cd11-8e72-40f7-837b-534608032b4f_6b94cde321758935a11aff77d43d022f.mp4?Expires=2030528953&OSSAccessKeyId=LTAI4GJsWdRydUwzqD1saGFZ&Signature=qV6Y9bhQ2qzFCd03SSyqq5TA738%3D',
				tabnum:0,
				courseDetail:'',
				scrollHeight:0,
				scrollId: '',
				courseId:'',
				detailCourseImage:'',
				isCollected:'',
				collectRecordNum:'',
				detailVideoId:'',//当前视频的id
				
			};
		},
		onLoad(options){
			// console.log('options',options);
			this.getList(this.$Route.query.courseId)
			this.courseId=this.$Route.query.courseId
			this.scrollHeight=uni.getSystemInfoSync().windowHeight-220+'px'
			// console.log('uni.getSystemInfoSync()',uni.getSystemInfoSync().windowHeight);
			
		
		},
		mounted(){
			
		},
		onShareAppMessage (res){
			console.log('res',res);
			 if (res.from === 'button') {// 来自页面内分享按钮
			      console.log(res.target)
			    }
			    return {
			      title: this.courseDetail.courseName,
				  imageUrl:this.courseDetail.courseImage,
			      path: '/extra/courseinfo/courseinfo?courseId='+this.$Route.query.courseId
			    }
		},
		methods:{
			getPosition(){
				// let that=this
				// let query = uni.createSelectorQuery().in(this)
				// query.select('.scroll-Y').boundingClientRect((res) => {
				// 		console.log('位置信息',res);
				// 		that.scrollHeight=uni.getSystemInfoSync().windowHeight-res.top-10+'px'
				// 	}).exec()
			},
			natTo(){
				this.$Router.push({
					path: '/extra/courseinfo/lecturerInfo',
					query: {
						expertId: this.courseDetail.lecturerId
					}
				})
			},
			getClick(item,index){
				this.scrollId = 'item-'+index
				console.log('scrollId',this.scrollId);
				
				this.detailCourseImage=item.detailCourseVideo
				this.detailVideoId=item.detailId
				this.playbackVolume(item)


			},
			changetab(val){
				this.tabnum=val
				// if(val==1){
				// 	this.getPosition()
				// }
			},
			getList(courseId){
				let param = {};
				param.url = 'v3/study/front/course/detail';
				param.method = 'GET'
				param.data = {}
				param.data.courseId = courseId
				this.$request(param).then(res=>{
					// console.log(res);
					if(res.state==200){
						this.courseDetail=res.data
						this.collectRecordNum=res.data.collectRecordNum
						// this.isCollected=res.data.collectRecordFlag
						// console.log('isCollected',this.isCollected);
						this.detailVideoId=res.data.courseDetailList[0].detailId
						this.detailCourseImage=res.data.courseDetailList[0].detailCourseVideo
						this.getColloectrecord(this.courseDetail.courseId)
						this.addrecord(res.data)
						this.playbackVolume(res.data.courseDetailList[0])
					}
				})
			},
			//收藏
			getCollect(){
				let param = {};
				param.url = 'v3/study/front/collect/add';
				param.method = 'POST'
				param.data = {}
				param.data.otherId = this.courseDetail.courseId
				param.data.collectType = 3
				param.data.collectTitle = this.courseDetail.courseName
				param.data.collectContent =  this.courseDetail.courseImage
				param.header={
					'Content-Type': 'application/json'
				},
				this.$request(param).then(res=>{
					console.log('收藏',res);
					if(res.state==200){
						console.log('收藏成功');
						this.getColloectrecord(this.courseDetail.courseId)
					}
					
				})
			},
			delCollect(){
				let param = {};
				param.url = 'v3/study/front/collect/delete';
				param.method = 'GET'
				param.data = {}
				param.data.otherId = this.courseDetail.courseId
				param.data.collectType = 3
				this.$request(param).then(res=>{
					if(res.state==200){
						this.getColloectrecord(this.courseDetail.courseId)
					}
					
				})
			},
			getColloectrecord(courseId){
				let param = {};
				param.url = 'v3/study/front/course/detail';
				param.method = 'GET'
				param.data = {}
				param.data.courseId = courseId
				this.$request(param).then(res=>{
					// console.log(res);
					if(res.state==200){
						this.isCollected=res.data.collectRecordFlag
						this.collectRecordNum=res.data.collectRecordNum
						console.log('his.isCollected',this.isCollected);
					}
				})
			},
			//新增视频观看记录
			addrecord(item){
				let param = {};
				param.url = 'v3/study/front/learning/add';
				param.method = 'POST'
				param.data = {}
				param.data.courseId = item.courseId
				param.data.videoId = item.courseDetailList[0].detailId
				param.data.learningTitle = item.courseName
				param.data.learningImage = item.courseImage
				param.header={
					'Content-Type': 'application/json'
				},
				this.$request(param).then(res=>{
					console.log('resss',res);
					
				})
				
			},
			//新增视频播放量
			playbackVolume(item){
				let param = {};
				param.url = 'v3/study/front/course/play';
				param.method = 'GET'
				param.data = {}
				param.data.detailId = item.detailId
				this.$request(param).then(res=>{
					console.log('resss22',res);
					
				})
			},
			
		}
	}
</script>
<style>
	page{
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.share_model_pre {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: transparent;
		border-radius: 0;
		height: auto;
		line-height: auto;
		margin: 0rpx 0;
		
		&::after {
			border-width: 0;
		}
		
		
		
		// text {
		// 	font-size: 24rpx;
		// 	font-family: PingFang SC;
		// 	font-weight: 500;
		// 	color: #ffffff;
		// 	line-height: 36rpx;
		// 	// margin-top: 30rpx;
		// }
	}
	.warp{
		.video_box{
			width: 750rpx;
			height: 350rpx;
			
			.video_item{
				width: 750rpx;
				height: 350rpx;
			}
		
		}
		.cntext_box{
			font-size: 24rpx;
			
			.c_tab{
				background-color: #fff;
				font-size: 28rpx;
				height: 80rpx;
				padding: 15rpx 30rpx;
				border-bottom: 2rpx solid #cecece;
				.ct_item{
					padding: 0 10rpx;
				}
				.active{
					font-size: 30rpx;
					color: #fc701e;
				}
			}
			
				
			
		
	}
	.classlist{
				padding: 20rpx 16rpx 0 42rpx;
				background-color: #fff;
				.classlist_title{
					padding: 10rpx 32rpx;
					font-size: 32rpx;
					font-weight: bold;
					position: relative;
					&::after{
						content: '';
						position: absolute;
						left: 4rpx;
						top: 18rpx;
						width: 10rpx;
						height: 25rpx;
						background-color: #fc701e;
	
					}
				}
				.item{
				    padding:8rpx 0;
					.left{
						width: 302rpx;
						height: 162rpx;
						margin-right: 32rpx;
						
						.list_left_video{
							width: 302rpx;
							height: 162rpx;
							border-radius: 16rpx;
							border: 2rpx solid #cccccc;
						}
					}
					.right{
						width: 390rpx;
						.title{
							width: 100%;
							font-size: 28rpx;
							font-weight: 600;
							margin-bottom: 10rpx;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
						}
						.tetx{
							width: 100%;
							color: #9B9B9B;
							font-size: 24rpx;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
	
						}
						.icons{
							margin-top: 40rpx;
							color: #9B9B9B;
						}
					}
				}
			}
	}
	.color_title{
		color: #FC701E;
	}
	.intraducetext_top{
		padding: 28rpx 42rpx 15rpx 38rpx;
		background-color: #fff;
		.intraducetext_top1{
			font-size: 24rpx;
			color: #9B9B9B;
			.intraducetext_top1_1{
				font-size: 32rpx;
				font-weight: bold;
			}
		.intraducetext_top1_2{
				font-size: 24rpx;
				color: #fff;
				background-color: #FC701E;
				padding: 12rpx 20rpx;
				border-radius: 10rpx;
			}
			.intraducetext_top1_3{
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}
		.intraducetext_top2{
			margin: 12rpx 0 24rpx 0 ;
			font-size: 24rpx;
			color: #9B9B9B;
			& view{
				margin-right:16rpx ;
				padding: 6rpx 12rpx;
				background-color:#F3F4F9 ;
			}
		}
	}
	.intraducetext_lecturer{
		margin-top: 12rpx;
		background-color: #fff;
		padding: 22rpx 74rpx 38rpx ;
		
		.intraducetext_lecturer_image{
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
		}
		
		.intraducetext_lecturer_right{
			font-size: 24rpx;
			color: #9B9B9B;
			margin-left: 32rpx;
			& view:first-child{
				font-size: 32rpx;
				margin-bottom: 8rpx;
				font-weight: bold;
			}
		}
	}
	

</style>
